<template class="page-background">
  <div class="container">
    <div class="loginContainer">
      <h3>请登陆</h3>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="登录名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>


<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        name: '',
        password: '',
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>

<style scoped>
/*.loginContainer {*/
/*  width: 350px;*/
/*  margin-top: 160px;*/
/*  !*margin-right: 60px;*!*/
/*  margin-left: 900px;*/
/*  box-shadow: 0 0 10px rgba(0,0,0,0.1);!*可选：为登录框添加阴影*!*/
/*  padding-top: 30px;*/
/*  padding-bottom: 30px;*/
/*  padding-right: 40px;*/

/*}*/


.container {
  display: flex; /* 开启flex布局 */
  justify-content: flex-end; /* 子项（.loginContainer）靠右 */
  /*align-items: center; !* 子项（.loginContainer）垂直居中 *!*/
  /*min-height: 100vh; !* 让.page-background至少有视窗的高度 *!*/
  /*padding-right: 40px; !* 可选：为右侧留出一些空间 *!*/
}

.loginContainer {
  /*justify-items: right;*/
  width: 350px; /* 定义登录表单的固定宽度 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：为登录框添加阴影 */
  padding: 30px 50px 30px 10px; /* 为登录框内部内容留出一些空间 */
  margin-right: 160px;
  margin-top: 180px;
  /* 已移除对margin的直接设置，因为flex将处理位置 */
}


</style>